<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>医师系统</title>
    <link rel="stylesheet" href="../../static/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../static/css/global.css" />
    <link rel="stylesheet" href="../../static/css/patient.css" />
</head>

<body>
    <!-- 弹窗组件 -->
    <div th:replace="~{reuse/alertBox::alertBox}"></div>
    <!-- 导航栏 -->
    <div th:replace="~{homepageFD::doctorHomeNav}"></div>
    <main class="mainBox">
        <!-- content -->
        <div class="container shadow-md-sm">
            <section class="mb-5">
                <header class="row mb-4">
                    <Strong class="col fs-3">患者信息</Strong>
                    <div class="input-group col">
                        <input id="input1" type="text" class="form-control" placeholder="请输入挂号编号">
                        <button class="btn btn-outline-secondary" type="button" onclick="findMedical()">查询</button>
                    </div>
                </header>
                <div id="medicalRecord" th:fragment="medicalRecord">
                    <div class="d-flex mb-3">
                        <div class="input-group me-3">
                            <span class="input-group-text">病历编号</span>
                            <input th:value="${medical}!=null?${medical.id}:null" disabled type="text"
                                class="form-control">
                        </div>
                        <div class="input-group me-3">
                            <span class="input-group-text">挂号类别</span>
                            <input th:value="${medical}!=null?${medical.registeredType}:null" disabled type="text"
                                class="form-control">
                        </div>
                        <div class="input-group ">
                            <span class="input-group-text">挂号科室</span>
                            <input th:value="${medical}!=null?${medical.registeredSection}:null" disabled type="text"
                                class="form-control">
                        </div>
                    </div>
                    <div class="d-flex mb-3">
                        <div class="input-group me-3">
                            <span class="input-group-text">患者姓名</span>
                            <input th:value="${medical}!=null?${medical.patientName}:null" disabled type="text"
                                class="form-control">
                        </div>
                        <div class="input-group me-3">
                            <span class="input-group-text">性别</span>
                            <input th:value="${medical}!=null?${medical.patientSex}:null" disabled type="text"
                                class="form-control">
                        </div>
                        <div class="input-group me-3">
                            <span class="input-group-text">年龄</span>
                            <input th:value="${medical}!=null?${medical.patientAge}:null" disabled type="text"
                                class="form-control">
                        </div>
                        <div class="input-group ">
                            <span class="input-group-text">身份证号</span>
                            <input th:value="${medical}!=null?${medical.patientIdcard}:null" disabled type="text"
                                class="form-control">
                        </div>
                    </div>
                    <div class="input-group ">
                        <span class="input-group-text">病情描述</span>
                        <textarea th:text="${medical}!=null?${medical.description}:null" disabled
                            class="form-control"></textarea>
                    </div>
                </div>
            </section>
            <section>
                <header class="row mb-4">
                    <Strong class="col fs-3">处方</Strong>
                    <div class="col d-flex justify-content-end">
                        <button class="btn btn-outline-secondary me-3" type="button" onclick="addRow()">增加药物选项栏</button>
                        <button class="btn btn-outline-secondary" type="button"
                            onclick="prescriptionSubmit()">提交</button>
                    </div>
                </header>
                <form id="Prescription" name="Prescription">
                    <div class="input-group mb-3">
                        <span class="input-group-text">诊断结果</span>
                        <textarea class="form-control" name="diagnosis"></textarea>
                    </div>
                    <div class="input-group mb-3">
                        <span class="input-group-text">治疗建议</span>
                        <textarea class="form-control" name="advices"></textarea>
                    </div>
                    <article id="ListBox">
                        <div id="medicineList" class="medicineList d-flex mb-3">
                            <div class="input-group me-3">
                                <select class="form-select" name="medicineName">
                                    <option class="text-warning">药物名称</option>
                                    <option th:each="list : ${medicineSelect}" th:text="${list.name}"
                                        th:value="${list.name}"></option>
                                </select>
                            </div>
                            <div class="input-group me-3">
                                <span class="input-group-text">数量</span>
                                <input type="text" class="form-control" name="medicineAmount">
                            </div>
                            <div class="input-group me-3">
                                <span class="input-group-text">服用频率</span>
                                <input type="text" class="form-control" name="medicineFrequency">
                            </div>
                            <div class="input-group ">
                                <span class="input-group-text">备注</span>
                                <input type="text" class="form-control" name="medicineComment">
                            </div>
                        </div>
                    </article>
                </form>
            </section>
        </div>
    </main>
    <script src="../../static/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        const prescriptionSubmit = () => {
            let medicalId = document.getElementById('input1').value;
            let diagnosis = document.Prescription.diagnosis.value;
            let advices = document.Prescription.advices.value;
            let len = document.getElementsByClassName("medicineList").length;
            let NameList = document.getElementsByName("medicineName");
            let AmountList = document.getElementsByName("medicineAmount");
            let FrequencyList = document.getElementsByName("medicineFrequency");
            let CommentList = document.getElementsByName("medicineComment");
            let MediniceList = [];
            for (let i = 0; i < len; i++) {
                let obj = {
                    name: NameList[i].value,
                    amount: AmountList[i].value,
                    frequency: FrequencyList[i].value,
                    comment: CommentList[i].value,
                };
                MediniceList.push(obj);
                // console.log(obj);
            }
            let data = {
                "medicalRecordId": medicalId,
                "diagnosis": diagnosis,
                "advices": advices,
                "prescription": JSON.stringify(MediniceList),
            };
            $.ajax({
                type: "POST",
                url: "/doctor/treating/prescribe",
                data: JSON.stringify(data),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
            })
            // console.log(data);
        }
        const addRow = () => {
            let ListBox = document.querySelector("#ListBox");
            let medicineList = document.querySelector("#medicineList");
            let newMedicineList = medicineList.cloneNode(true);
            ListBox.appendChild(newMedicineList);
        }
        const findMedical = () => {
            let id = document.getElementById('input1').value;
            $("#medicalRecord").load(
                `/doctor/treating?medicalId=${id}`
            );
        }
    </script>
</body>

</html>